<template>
  <div class="home">
      <div class="top">
         <Header />
         <h3 class="text-center padding-top-150">数字货币交易平台</h3>
         <div class="text-center">
            <h4>快速•便捷•安全</h4>
            <!-- <button class="aqua-button hand" > 马上体验交易 </button> -->
            <router-link :to="{path:'/transaction/index'}" class="aqua-button hand"  tag="button">马上体验交易</router-link>
         </div>
         <vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
            <ul class="seamless">
              <li v-for="n in 10" :key='n'>
                <div class="title"><i class="icon-cricle"></i> BTC/USDT{{n}}</div>
                <div class="margin-top-10"> <span class="amount">12000.542</span>  <span class="precent pull-right font-green">+0.18%</span></div>
                <div><span class="font-gray">24h</span> 185.478</div>
                <div class="monely">8450.34CNY</div>
              </li>
            </ul>
         </vue-seamless-scroll>
      </div>
      <div class="introduce margin-bottom-50">
          <h3 class="text-center padding-top-60"> <span class="hand" style="color:#1ecbfd">DC Option</span> 强调什么？</h3>
         
          <el-row type="flex"  justify="space-between"  >
              <el-col :span="6"><div class="item-img item-img-one"></div></el-col>
              <el-col :span="6"><div class="item-img item-img-two"></div></el-col>
              <el-col :span="6"><div class="item-img item-img-three"></div></el-col>
              <el-col :span="6"><div class="item-img item-img-four"></div></el-col>            
          </el-row>                
      </div>
      <div class="platform-bg">
        <div class="platform">
            <el-container>
              <el-aside width="248px;" style="position:relative">
                  <h2><span class="hand">多平台体验</span></h2>
                  <div class="content">
                        <span>
                          MacOs,Windows极致体验<br>便捷货币交易
                        </span>
                  </div>
                  <div class="select">
                      <i class="prev" @click="nextImg()"><img src="./img/icon-up.png" alt=""></i>
                      <i class="next" @click="prevImg()"><img src="./img/icon-down.png" alt=""></i>
                  </div>
              </el-aside>
              <el-main>
                <el-carousel :interval="3000" arrow="always" ref="carousel">
                  <el-carousel-item v-for="item in 4" :key="item">
                     <img src="./img/bg-plateform-phone.png" alt="">
                  </el-carousel-item>
                </el-carousel>
                
              </el-main>
            </el-container>
        </div>
      </div>
      <!-- 引导用户 -->
      <div class="lead">
            <div class="top">
              <h3 class="padding-top-60">如何体验?</h3>
              <h3> <span class="hand">如何交易?</span> </h3>  
            </div> 
            <div class="middle">
              <el-container>
                  <el-aside width="248px">
                      <div class="tagging">
                        <p>“这里有你想要的”</p>
                        <img src="./img/lead-img-down.png" alt="">
                      </div>                  
                </el-aside>
                <el-main>                 
                  <div class="item">
                      <vue-seamless-scroll :data="newsList1" :class-option="optionTop" class="seamless-warp">
                          <div ref='seamless'>
                            <div class="item-list" v-for="n in 4" :key="n">
                                <el-row class="bg-dark-blue">
                                  <el-col :span="12">
                                    <h4 class='font-aqua'>注册用户</h4>
                                    <p>初始100,000美金随心用</p>
                                    <p>真实账户or模拟账户随切换</p>
                                  </el-col>
                                  <el-col :span="12">
                                      <img src="./img/lead-item-1.png" alt="">
                                  </el-col>
                                </el-row>
                                <el-row  class="bg-dark-blue">
                                  <el-col :span="12">
                                    <h4 class='font-aqua'>账户入金</h4>
                                    <p>用户填写资料,审核实名认证</p>
                                    <p>支持多种银行卡卡种，随时填充</p>
                                  </el-col>
                                  <el-col :span="12">
                                      <img src="./img/lead-ltem-2.png" alt="">
                                  </el-col>
                                </el-row>
                            </div>
                          </div>
                      </vue-seamless-scroll>
                  </div>
                </el-main>
              </el-container>
            </div>     
      </div>

      <!-- 事迹线 -->
      <div class="achievement bg-dark-blue">
        <h3 class="text-center"><span>事迹时间线</span></h3>
        <h4 class="text-center"><span>总市值</span></h4>
        <div class="content">
              <div class="show-text">
                    <div class="text-center"><span class="title">{{achievement[this.currentNum].time}}</span></div>
                    <p>{{achievement[this.currentNum].title}}</p>
                    <div class="text-content">
                      {{achievement[this.currentNum].content}}
                    </div>
                    <div class="bottom">{{achievement[this.currentNum].subTitle}}  &nbsp;&nbsp;&nbsp; <span class="font-golden">{{achievement[this.currentNum].value}} </span> </div>
              </div>
                <!-- 第一个点 -->
              <div class="icon-cricle icon-cricle-1" :class="current == 'one' ? 'active':''" style="z-index:11;" @click="aniLine('one')"></div>             
              <div v-show="this.current == 'one'" class="icon-line-1" :style="{height:animateNumber+'px'}"></div>
              <div v-show="this.current == 'one'" class="icon-line-1-2" :style="{width:animate2Number+'px'}"></div>
              <!-- 第二个点 -->
              <div class="icon-cricle icon-cricle-2" :class="current == 'two' ? 'active':''" style="z-index:11;" @click="aniLine('two')"></div>             
              <div v-show="this.current == 'two'" class="icon-line icon-line-2-1" :style="{height:animateNumber+'px'}" ></div>
              <div v-show="this.current == 'two'" class="icon-line icon-line-2-2" :style="{width:animate2Number+'px'}"></div>
              <!-- 第三个点 -->
              <div class="icon-cricle icon-cricle-3" :class="current == 'three' ? 'active':''" style="z-index:11;" @click="aniLine('three')"></div>             
              <div v-show="this.current == 'three'" class="icon-line icon-line-3-1" :style="{height:animateNumber+'px'}" ></div>
              <div v-show="this.current == 'three'" class="icon-line icon-line-3-2" :style="{width:animate2Number+'px'}"></div>
              <!-- 第四个点 -->
              <div class="icon-cricle icon-cricle-4" :class="current == 'four' ? 'active':''" style="z-index:11;" @click="aniLine('four')"></div>                     
              <div v-show="this.current == 'four'" class="icon-line icon-line-4-1" :style="{height:animateNumber+'px'}" ></div>
              <!-- 第五个点 -->
              <div class="icon-cricle icon-cricle-5" :class="current == 'five' ? 'active':''" style="z-index:11;" @click="aniLine('five')"></div>                     
              <div v-show="this.current == 'five'" class="icon-line icon-line-5-1" :style="{height:animateNumber+'px'}" ></div>
              <!-- 第六个点 -->
              <div class="icon-cricle icon-cricle-6" :class="current == 'six' ? 'active':''" style="z-index:11;" @click="aniLine('six')"></div>                     
              <div v-show="this.current == 'six'" class="icon-line icon-line-6-1" :style="{height:animateNumber+'px'}" ></div>
               <!-- 第七个点 -->
              <div class="icon-cricle icon-cricle-7" :class="current == 'seven' ? 'active':''" style="z-index:11;" @click="aniLine('seven')"></div>                     
              <div v-show="this.current == 'seven'" class="icon-line icon-line-7-1" :style="{height:animateNumber+'px'}" ></div>
              <div v-show="this.current == 'seven'" class="icon-line icon-line-7-2" :style="{width:animate2Number+'px',left:900-animate2Number + 'px'}"></div>

        </div>
      </div>

      <div class="foot" v-if="!$store.state.userId">    
           <el-row >
              <el-col :span="12"><div class="text-right">
                 <span style="margin-right: 120px">DC Option &nbsp;&nbsp; 为用户创造价值</span>
                </div></el-col>
              <el-col :span="12"><div class="item-btn">           
                <router-link :to="{path:'login'}" class="login" tag="button">登录</router-link>
                <router-link :to="{path:'register'}" class="register auqa-button hand" style="border:none;" tag="button">注册</router-link>
                 <!-- <button class="login hand">登录</button>
                 <button class="aqua-button hand register">注册</button>  -->
                </div></el-col>
            </el-row>
        
        <h6 class="text-center">DC Option</h6>
      </div>

      <Footer></Footer>
  </div>
</template>

<script>
import Vue from 'vue'
import Header from '@/components/Header'
import Footer from '@/components/footer'
import {mapState,mapActions,mapMutations} from 'vuex'
import seamless from 'vue-seamless-scroll/src'
Vue.use(seamless);
export default {
  name: 'Home',
  components:{
     Header,
     Footer
  }, 
  data () {
    return {
        canSave:true,
        heightIntroduce:'',
        tweenedNumber:286,
        tweened2Number:323,
        current:'one', //当前默认点 第一个
        currentNum:0,
        AnimationState:true,
        line1:{
          state:true,
          number:0,
          
        },
        newsList: [{'title': 'A simple, seamless scrolling for Vue.js'}, 
        {'title': 'A curated list of awesome things related to Vue.js'},
        {'title': 'A curated list of awesome things related to Vue.js'},
        {'title': 'A curated list of awesome things related to Vue.js'}],
        newsList1: [{'title': 'A simple, seamless scrolling for Vue.js'}, 
        {'title': 'A curated list of awesome things related to Vue.js'},
        {'title': 'A curated list of awesome things related to Vue.js'},
        {'title': 'A curated list of awesome things related to Vue.js'}],
        achievement:[
          {time:'2009年1月1日',title:"比特币的发明人究竟是谁",content:'2008年，一位名叫中本聪(Satoshi Nakamoto)的日本佬上传了一份命名为“比特币：一个P2P电子货币系统”的白皮书到一个密码学邮件列表中。',
            subTitle:'比特币市值',value:'0.11'
          },{time:'20011年2月9日',title:"比特币价格突破1美元",content:'比特币在门头沟的价格首次突破1美元，并由此引发了新一轮购买比特币的热潮。新用户的涌入和交易量的激增， 导致门头沟曾因短暂时流量过大而瘫痪。',
            subTitle:'比特币市值',value:'100'
          },{time:'20012年2月9日',title:"比特币价格突破1美元",content:'比特币在门头沟的价格首次突破1美元，并由此引发了新一轮购买比特币的热潮。新用户的涌入和交易量的激增， 导致门头沟曾因短暂时流量过大而瘫痪。',
            subTitle:'比特币市值',value:'10000'
          },
          {time:'20013年2月9日',title:"比特币价格突破1美元",content:'比特币在门头沟的价格首次突破1美元，并由此引发了新一轮购买比特币的热潮。新用户的涌入和交易量的激增， 导致门头沟曾因短暂时流量过大而瘫痪。',
            subTitle:'比特币市值',value:'100000'
          },{time:'20014年2月9日',title:"比特币价格突破1美元",content:'比特币在门头沟的价格首次突破1美元，并由此引发了新一轮购买比特币的热潮。新用户的涌入和交易量的激增， 导致门头沟曾因短暂时流量过大而瘫痪。',
            subTitle:'比特币市值',value:'1,000,000'
          },{time:'20015年2月9日',title:"比特币价格突破1美元",content:'比特币在门头沟的价格首次突破1美元，并由此引发了新一轮购买比特币的热潮。新用户的涌入和交易量的激增， 导致门头沟曾因短暂时流量过大而瘫痪。',
            subTitle:'比特币市值',value:'1,000,100,00'
          },{time:'20017年2月9日',title:"比特币价格突破1美元",content:'比特币在门头沟的价格首次突破1美元，并由此引发了新一轮购买比特币的热潮。新用户的涌入和交易量的激增， 导致门头沟曾因短暂时流量过大而瘫痪。',
            subTitle:'比特币市值',value:'10,000,000,000'
          }

        ]
    }
  },
  computed:{
    optionLeft() {
        return {
                direction: 2,
                limitMoveNum: 1
        }
    },
    optionTop() {
        return {
                direction: 1,  
                limitMoveNum: 4,
                hoverStop: false       
        }
    },
   number(){
      return this.line1.number;
    },
    animateNumber:function(){
      return this.tweenedNumber.toFixed(0);
    },
    animate2Number:function(){
      return this.tweened2Number.toFixed(0);
    }
    
  },
  methods:{  
    prevImg(){
       this.$refs.carousel.prev();
    },
    nextImg(){
       this.$refs.carousel.next();
    }, 
    aniLine(Value){
      if(!this.AnimationState) return false;
      console.log(Value);         
      this.tweenedNumber = 0; 
      this.tweened2Number = 0;
      this.current = Value;
      this.line1.number ++;
    }  
  },
  watch:{
    number:function(newValue){
      const _this = this;
      _this.AnimationState  = false;
      this.tweenedNumber = 0;
      this.tweened2Number = 0;
      switch(this.current) {
        case 'one':
            this.currentNum = 0;
            TweenLite.to(this.$data, 0.5,{tweenedNumber:286})
            TweenLite.to(this.$data, 1,{tweened2Number:323,delay:0.5,})
            break;
        case 'two':
            this.currentNum = 1;
            TweenLite.to(this.$data, 0.5,{tweenedNumber:300})
            TweenLite.to(this.$data, 1,{tweened2Number:133,delay:0.5})
            break;
        case 'three':
            this.currentNum = 2;
            TweenLite.to(this.$data, 0.5,{tweenedNumber:280})
            TweenLite.to(this.$data, 1,{tweened2Number:35,delay:0.5})
            break;
         case 'four':
            this.currentNum = 3;
            TweenLite.to(this.$data, 0.6,{tweenedNumber:198})
            // TweenLite.to(this.$data, 1,{tweened2Number:0,delay:1})
            break;
        case 'five':
            this.currentNum = 4;
            TweenLite.to(this.$data, 0.6,{tweenedNumber:166})
            // TweenLite.to(this.$data, 1,{tweened2Number:0,delay:1})
            break;
        case 'six':
            this.currentNum = 5;
            TweenLite.to(this.$data, 0.6,{tweenedNumber:177})
            // TweenLite.to(this.$data, 1,{tweened2Number:0,delay:1})
            break;
        case 'seven':
            this.currentNum = 6;
            TweenLite.to(this.$data, 0.5,{tweenedNumber:296})
            TweenLite.to(this.$data, 1,{tweened2Number:102,delay:0.5})
            break;
        default:      
      }     

       setTimeout(function(){
            _this.AnimationState = true;
        },1500)
    }
  }
  
}
</script>


<style>
.el-carousel__container{height: 480px;}
.el-carousel__arrow {display: none;}
</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'  scoped>
    .bg-purple{background-color: rebeccapurple;}
    .home{width: 100%;height: 100%;min-height: 1200px; background: url('./img/bg-over.png') no-repeat;box-sizing: border-box;}
    .home .top{ width: 100%;height: 920px;background: url('./img/bg-top-1.png') no-repeat;background-position: center;position: relative;
       h3{font-size: 45px;font-weight: 100;}
       h4{font-size: 24px;font-weight: 100;line-height: 80px;}
       button{margin-top: 40px;border-radius: 4px;}
       .seamless-warp2{
         position: absolute;bottom: 0;height: 140px;white-space: nowrap; width: 100%;overflow: hidden;
      
       .seamless{ width: 100%;
        li{display: inline-block;margin-left: 20px; width: 200px;height: 120px;border-radius: 4px; background-color: #2b2c50;opacity: 1;
          padding: 10px 20px; line-height: 24px;opacity: 0.9;
          .icon-cricle{display: inline-block;width: 16px;height: 16px;vertical-align: -4px; border-radius: 50%;background-color: #72739c;}
          .amount{font-size: 20px;}
          .monely{margin-top: 4px;}
        }
       }
      }
      ul li:first-child{margin-left:0px;}
    }
.home{
  .introduce{
        h3{font-size: 30px;font-weight: 100;margin-bottom:60px;
        .hand{border-bottom: 1px solid #1ecbfd;padding-bottom: 4px;vertical-align: 4px;}
        }
        .el-row{ text-align: center;max-width: 1200px;margin: 0 auto!important;padding: 0; overflow: hidden;
          .item-img{height: 290px;width: 260px; color:#111;}
          .item-img-one{background: url('./img/instroduce-1.png') no-repeat 100%;}
          .item-img-two{background: url('./img/instroduce-2.png') no-repeat 100%;}
          .item-img-three{background: url('./img/instroduce-3.png') no-repeat 100%;}
          .item-img-four{background: url('./img/instroduce-4.png') no-repeat 100%;}
        }
  }
  .platform-bg{
      padding: 60px;
      background-color: #1e1f3b;
      .platform{width: 1200px; margin: 0 auto;padding: 10px;box-sizing: border-box;
          .el-aside{padding-top: 24px;letter-spacing: 1px;
          h2{
            span{border-bottom: 1px solid #1ecbfd;line-height: 60px;font-size: 26px;font-weight: lighter;padding-bottom: 4px;}
          }
          .content{margin-top: 60px;line-height: 30px;font-size: 14px;font-weight: lighter;}
          }
          .el-main{width: 932px;height: 496px; overflow: hidden;}
          .select{position: absolute;bottom: 50px;
            i{margin-right: 20px; display: inline-block;width: 56px;height: 56px;background-color: #2b2c50;text-align:center;border-radius: 4px;
              img{margin-top: 17px;width: 20px;}
            }
          }
      }
  }
  .lead{
      position: relative;
      h3{ letter-spacing: 1px;font-size: 26px;font-weight: lighter;line-height: 40px;text-align: center;
        span{padding-bottom: 4px; border-bottom: 1px solid #1ecbfd;}
      }
      .top{padding-top:40px;width: auto;height: 160px; background:url('./img/lead-bg-top.png') no-repeat;background-position: 55% 86%; background-size: 8%;}
      .middle{width: 1200px; margin: 0 auto;padding: 10px;box-sizing: border-box;
        .el-aside{position: relative;
          .tagging{position: absolute;bottom: 140px;
            p{line-height: 40px;font-size: 20px;}
            img{width:60px;}
          }
        }  
        .item{height:100%;overflow: hidden;}
        .el-main{height: 700px;overflow-y: hidden;}
            .el-row{border-radius: 4px; margin-top: 40px;}
            .el-row:nth-child(0){margin-top: 0;}
            .el-col-12{margin: 50px 0;padding: 0 50px;height: 186px;
              img{width: 246px;height: 182px;}
            }
            .el-row .el-col-12:nth-child(1){border-right: 1px solid #1ecbfd;}
            h4{font-size: 34px;font-weight: lighter;margin-bottom: 80px;}
            p{line-height: 30px;font-size: 16px;font-weight: lighter;}
        }
        
  }
  .achievement{
    h3{font-size: 30px;font-weight: 100;line-height: 80px;padding-top: 40px;
      span{padding-bottom: 4px; border-bottom: 1px solid #1ecbfd;}
    }
    h4{font-weight: lighter;font-size: 14px}
    .content{width: 1200px;height:690px; margin: 0 auto;padding: 10px;box-sizing: border-box;border:1px solid #212241;
      position: relative;
      background:url('./img/achievement-line.png') no-repeat;
      background-position: center 40px;
      .icon-cricle {display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:rgba(78,194,227,0.3);position: absolute}
      .icon-cricle:hover{transform: scale(3);border:1pxs solid #4ec2e3;}
       .active{transform: scale(3);border:0.1px solid #4ec2e3;}
      .icon-cricle-1{top:139px;left: 72px;}
      .icon-line-1{width: 2px; background-color: #4ec2e3;position: absolute;top:149px;left: 76px;}
      .icon-line-1-2{height: 2px; background-color: #4ec2e3;position: absolute;top:434px;left: 76px;}
    
      .icon-line{position: absolute;background-color: #4ec2e3;}
     
      .icon-cricle-2{top: 125px;left: 261px;}
      .icon-line-2-1{width: 2px; top:136px;left: 265px;}//height: 300px;
      .icon-line-2-2{height: 2px;top:434px;left: 265px;}//width:133px;

       .icon-cricle-3{top: 146px;left: 360px;}
      .icon-line-3-1{width: 2px; top:156px;left: 364px;}//height: 280px;
      .icon-line-3-2{height: 2px;top:434px;left: 364px;}//width:35px;

      .icon-cricle-4{top: 101px;left: 552px;}
      .icon-line-4-1{width: 2px;top: 112px;left: 556px;} //198px
       .icon-cricle-5{top: 134px;left: 681px;}
      .icon-line-5-1{width: 2px;top: 144px;left: 685px;} // 166
      .icon-cricle-6{top: 134px;left: 781px;}
      .icon-line-6-1{width: 2px;top: 134px;left: 785px;}//178
      .icon-cricle-7{top: 131px;left: 896px;}
      .icon-line-7-1{top: 142px;left: 900px;width: 2px;height: 0px;} //296
      .icon-line-7-2{height: 2px;left: 902px;top: 436px;}   //102
   }
    .show-text{width: 340px;padding: 10px 30px;margin: 300px auto 0px;background-color: #1e1f3b;
     .title{padding: 6px 24px;border-radius: 23px;line-height: 60px;
            background: -webkit-linear-gradient(left, #1ed7ff ,#1aaffe); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right, #1ed7ff,#1aaffe) ;/* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right, #1ed7ff,#1aaffe); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, #1ed7ff , #1aaffe); /* 标准的语法 */
     }
     p{text-align: center;font-size: 20px;line-height: 40px;}
    .text-content{padding: 10px;line-height: 24px;color: #72739c;font-size: 14px;letter-spacing: -0.24px;}
    .bottom{text-align: center;line-height: 40px;font-size: 14px;}
    }
  }  
  .foot{
        background-color: #1c1d3b;
        .text-right{line-height: 90px;font-size: 18px;font-weight: lighter;
        span{padding-bottom: 8px;border-bottom: 1px solid #1ecbfd;}
        }
        .el-row{border-bottom: 1px solid #313258;padding-top: 10px;padding-bottom: 10px;}
        .item-btn{
          button{width: 150px;height: 54px;margin-top: 23px; margin-left: 40px;border-radius: 4px;}
          .login{background-color: #1c1d3b;border:1px solid #1ecbfd;color: #1ecbfd;letter-spacing: 1px;}
          .register{
                background: -webkit-linear-gradient(left, #77e0f7 ,#29a8d1); /* Safari 5.1 - 6.0 */
                background: -o-linear-gradient(right, #77e0f7,#29a8d1) ;/* Opera 11.1 - 12.0 */
                background: -moz-linear-gradient(right, #77e0f7,#29a8d1); /* Firefox 3.6 - 15 */
                background: linear-gradient(to right, #77e0f7 , #29a8d1); /* 标准的语法 */
          }
        }
        h6{font-size: 24px;line-height: 80px;font-weight: lighter;padding-top: 10px;}
  }

}

</style>
